<template>
  <div class="menu-wrapper">
    <div class="logo">
      <nuxt-link class="link" to="/">
        <!-- <span class="an">知</span><span class="lin">否</span> -->
        <!-- <img src="@/static/logo.jpg" alt=""> -->
        <div class="logo-img"></div>
      </nuxt-link>
    </div>
    <div class="menus">
      <div @click="link('/')">
        <nuxt-link class="link" to="/" :class="linkUrl === '/' ? 'active' : ''">首页</nuxt-link>
      </div>
      <div @click="link('/blog')">
        <nuxt-link class="link" to="/blog" :class="linkUrl === '/blog' ? 'active' : ''">创作</nuxt-link>
      </div>
      <nuxt-link class="link" to="/" :class="linkUrl === '/music'? 'active':''">活动</nuxt-link>
      <nuxt-link class="link" to="/" :class="linkUrl === '/music'? 'active':''">学习</nuxt-link>
      <nuxt-link class="link" to="/" :class="linkUrl === '/music'? 'active':''">聊天</nuxt-link>
      <nuxt-link class="link" to="/" :class="linkUrl === '/music'? 'active':''">音乐</nuxt-link>
    </div>
    <div class="search">
      <el-input v-model="searchValue" placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="navs">
      <nuxt-link class="link" to="/login">登录</nuxt-link>
      <nuxt-link class="link register" to="/register">注册</nuxt-link>
    </div>
    <!-- <canvas id="myCanvas" width="1920" :height="$gbCss.tmHeight"></canvas> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      linkUrl: this.$route.path,
      logoSrc: require('@/static/logo.jpg'),
      titleBgUrl: require('@/static/title-bg.jpg'),
      searchValue: ''
    }
  },
  mounted() {
    // this.initCanvas()
  },
  methods: {
    link(to:string) {
      this.linkUrl = to
    },
    initCanvas() {
      var img = new Image()

      // User Variables - customize these to change the image being scrolled, its
      // direction, and the speed.

      img.src = this.titleBgUrl
      var CanvasXSize = 1920
      var CanvasYSize = 200
      var speed = 30 // lower is faster
      var scale = 1.05
      var y = -4.5 // vertical offset

      // Main program

      var dx = 0.75
      var imgW: number
      var imgH: number
      var x = 0
      var clearX: number
      var clearY: number
      var ctx: any

      img.onload = function () {
        imgW = img.width * scale
        imgH = img.height * scale

        if (imgW > CanvasXSize) {
          // image larger than canvas
          x = CanvasXSize - imgW
        }
        if (imgW > CanvasXSize) {
          // image width larger than canvas
          clearX = imgW
        } else {
          clearX = CanvasXSize
        }
        if (imgH > CanvasYSize) {
          // image height larger than canvas
          clearY = imgH
        } else {
          clearY = CanvasYSize
        }

        // get canvas context
        const dom: any = document.getElementById('myCanvas')

        ctx = dom.getContext('2d')

        // set refresh rate
        return setInterval(draw, speed)
      }

      function draw() {
        ctx.clearRect(0, 0, clearX, clearY) // clear the canvas

        // if image is <= Canvas Size
        if (imgW <= CanvasXSize) {
          // reset, start from beginning
          if (x > CanvasXSize) {
            x = -imgW + x
          }
          // draw additional image1
          if (x > 0) {
            ctx.drawImage(img, -imgW + x, y, imgW, imgH)
          }
          // draw additional image2
          if (x - imgW > 0) {
            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH)
          }
        } else {
          // image is > Canvas Size
          // reset, start from beginning
          if (x > CanvasXSize) {
            x = CanvasXSize - imgW
          }
          // draw additional image
          if (x > CanvasXSize - imgW) {
            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH)
          }
        }
        // draw image
        ctx.drawImage(img, x, y, imgW, imgH)
        // amount to move
        x += dx
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.menu-wrapper {
  padding: 0 20px;
  display: flex;
  justify-content: center;
  height: var(--tmHeight);
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.03);
  z-index: 999;
  position: relative;
  #myCanvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .logo {
    flex: 0 0 8%;
    height: 100%;
    font-weight: 700;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .an {
      font-size: 26px;
      color: var(--tmColor);
    }
    .lin {
      font-size: 26px;
      color: var(--childColor);
    }
    .logo-img {
      width: 100px;
      height: var(--tmHeight);
      background-image: url("static/logo.jpg");
      background-position: 52% 48%;
      background-size: 200%;
      background-repeat: no-repeat;
    }
  }
  .search,
  .menus,
  .navs {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .search {
    flex: 0 0 600px;
    padding: 0 40px;
  }
  .menus {
    .active {
      border-bottom: 1px solid #eee;
      color: var(--tmColor);
    }
    .link {
      padding: 5px 3px;
    }
  }
  .navs {
    flex: 0 0 auto;
    padding: 0 20px;
    .register {
      border: 1px solid var(--childColor);
      padding: 2px 5px;
      color: var(--tmColor);
    }
  }
}
</style>
